<template>
    <div class="component-div">
        <!-- 页面标题 -->
        <div class="page-title">
            <!-- 标题文本 -->
            <div class="title-text">
                数据概况
            </div>
            <div class="blue-bar">
        </div>
        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 下面div 的 class自己写，例如class="doctor-management" -->
            <div class="main">
                <div class="select-date-range">
                    <span class="select-date-range-text">选择日期范围:{{today}}</span>
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        unlink-panels
                        range-separator="~"
                        start-placeholder="开始时间"
                        end-placeholder="截止时间"
                        value-format="YYYY-MM-DD"
                        :shortcuts="shortcuts"
                        @change="checkDateRange"
                    >
                    </el-date-picker>
                </div>
                <div class="main-div">
                    <el-row>
                        <!-- 数据概况 -->
                        <el-col :span="24">
                            <div class="grid-content data-overview">
                                <div class="grid-content-title">
                                    <span>数据概况</span>
                                </div>
                                <!-- 图表 -->
                                <div id="chart_1" ></div>
                                <!-- 表格   style="width: 100%" -->
                                <div class="table">
                                    <el-table 
                                    :data="dateOverviewList" 
                                    stripe 
                                    :style="{width: '100%',textAlign: 'center'}"
                                    :header-cell-style="{textAlign: 'center'}" 
                                    :cell-style="{ textAlign: 'center' }"
                                    max-height="375"
                                    show-summary
                                    >
                                        <el-table-column prop="targetDate" label="日期"/>
                                        <el-table-column prop="newResidentNum" label="新增居民数量"/>
                                        <el-table-column prop="newContractNum" label="新增签约量" />
                                        <el-table-column prop="newServiceNum" label="新增服务量"/>
                                    </el-table>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="45">
                        <!-- 居民年龄构成 -->
                        <el-col :span="8">
                            <div class="grid-content resident-age-composition">
                                <div class="grid-content-title">
                                    <span>居民年龄构成</span>
                                </div>
                                <div id="chart_2"></div>
                            </div>
                        </el-col>
                        <!-- 居民学历构成 -->
                        <el-col :span="8">
                            <div class="grid-content resident-educational-composition">
                                <div class="grid-content-title">
                                    <span>居民学历构成</span>
                                </div>
                                <div id="chart_3"></div>
                            </div>
                        </el-col>
                        <!-- 居民性别构成 -->
                        <el-col :span="8">
                            <div class="grid-content resident-gender-composition">
                                <div class="grid-content-title">
                                    <span>居民性别构成</span>
                                </div>
                                <div id="chart_4"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="45">
                        <!-- 居民标签 -->
                        <el-col :span="8">
                            <div class="grid-content resident-label">
                                <div class="grid-content-title">
                                    <span>居民标签</span>
                                </div>
                                <div id="chart_5"></div>
                            </div>
                        </el-col>
                        <!-- 服务包使用情况 -->
                        <el-col :span="16">
                            <div class="grid-content service-package-usage">
                                <div class="grid-content-title">
                                    <span>服务包使用情况</span>
                                </div>
                                <div id="chart_6"></div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapActions } from "vuex";
import { getNowDate, addDate } from "@/utils/functions";
export default {
    data() {
        return {
            // dateRange:'',
            residentTotalNum: 1000,
            dateRange: [addDate(getNowDate(),-6), getNowDate()],
            
            dateOverviewList: [],
            targetDate: [],
            newResidentNum: [],
            newContractNum: [],
            newServiceNum: []
        }
    },
    created() {
        this.init()
    },
    mounted() {
        // this.myFirstChart(),
        this.myOtherCharts()
    },
    methods: {
        // 注册store中actions
        ...mapActions(["doGetDateOverviewList"]),
        init() {
            this.doGetDateOverviewList({beginDate: this.dateRange[0], endDate: this.dateRange[1] })
                .then((res) => {
                    this.dateOverviewList = res.data.data;
                    console.log(this.dateOverviewList);
                    this.dateOverviewList.forEach((data) => {
                        data.newResidentNum = data.newResidentNum == null ? 0 : data.newResidentNum
                        data.newContractNum = data.newContractNum == null ? 0 : data.newContractNum
                        data.newServiceNum = data.newServiceNum == null ? 0 : data.newServiceNum
                        this.targetDate.push(data.targetDate)
                        this.newResidentNum.push(data.newResidentNum == null ? 0 : data.newResidentNum)
                        this.newContractNum.push(data.newContractNum == null ? 0 : data.newContractNum)
                        this.newServiceNum.push(data.newServiceNum == null ? 0 : data.newServiceNum)
                    }),
                    this.myFirstChart()
                })
            },
        myFirstChart() {
            // 基于准备好的dom，初始化echarts实例
            var myFirstChart = echarts.init(document.getElementById('chart_1'), '', {width: 1150, height:425});
            // 绘制图表
            myFirstChart.setOption({
                grid:{
                    y:125
                },
                tooltip: {
                    trigger: 'axis'
                },
                // 图例
                legend: {
                    data: ['居民数量','签约量','服务量'],
                    x: '75',
                    y: '65',
                },
                // 全局调色盘。
                color: [
                    '#2984f8',
                    '#ff6262',
                    '#28d094'
                ],
                xAxis: {
                    // data: this.targetDate
                    data: ['1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16']
                },
                yAxis: {},
                series: [
                    {
                        name: '居民数量',
                        type: 'line',
                        // data: this.newResidentNum
                        data: [65, 102, 245, 75, 189, 45, 185]
                    },
                    {
                        name: '签约量',
                        type: 'line',
                        // data: this.newContractNum
                        data: [75, 202, 52, 88, 203, 82, 85]
                    },
                    {
                        name: '服务量',
                        type: 'line',
                        // data: this.newResidentNum
                        data: [158, 56, 84, 106, 75, 165, 76]
                    }

                ]
            });
        },
        myOtherCharts() {
            // 居民年龄构成
            var mySecondChart = echarts.init(document.getElementById('chart_2'), '', {width: 345, height:385});
            mySecondChart.setOption({
                title: {
                    text: '居民总数',
                    textStyle: {
                        color: '#999',
                        fontWeight: 'normal',
                        fontSize: 12
                    },
                    subtext: this.residentTotalNum,
                    subtextStyle: {
                        color: '#333',
                        fontSize: 18,
                    },
                    x: '143',
                    y: '140'
                },
                legend: [
                    {
                        orient: 'vertical',
                        x: '30',
                        y: '285',
                        data: ['15岁以下', '15-25岁', '25-35岁']
                    },
                    {
                        orient: 'vertical',
                        x: '180',
                        y: '285',
                        data: [ '35-45岁', '45-55岁','55岁以上']
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '45%'],
                        center: ['50%', '43%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            emphasis: {
                            show: false
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 335, name: '15岁以下' },
                            { value: 310, name: '15-25岁' },
                            { value: 234, name: '25-35岁' },
                            { value: 135, name: '35-45岁' },
                            { value: 135, name: '45-55岁' },
                            { value: 1548, name: '55岁以上' }
                        ]
                    }
                ]
            });
            // 居民学历构成
            var myThirdChart = echarts.init(document.getElementById('chart_3'), '', {width: 345, height:385});
            myThirdChart.setOption({
                title: {
                    text: '居民总数',
                    textStyle: {
                        color: '#999',
                        fontWeight: 'normal',
                        fontSize: 12
                    },
                    subtext: this.residentTotalNum,
                    subtextStyle: {
                        color: '#333',
                        fontSize: 18,
                    },
                    x: '143',
                    y: '140'
                },
                legend: [
                    {
                        orient: 'vertical',
                        x: '30',
                        y: '285',
                        data: ['小学', '初中', '中专/高中']
                    },
                    {
                        orient: 'vertical',
                        x: '185',
                        y: '285',
                        data: [ '大专/本科', '硕士及以上','其它']
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '45%'],
                        center: ['50%', '43%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            emphasis: {
                            show: false
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 335, name: '小学' },
                            { value: 310, name: '初中' },
                            { value: 234, name: '中专/高中' },
                            { value: 135, name: '大专/本科' },
                            { value: 135, name: '硕士及以上' },
                            { value: 1548, name: '其它' }
                        ]
                    }
                ]
            });
            // 居民性别构成
            var myFourthChart = echarts.init(document.getElementById('chart_4'), '', {width: 345, height:385});
            myFourthChart.setOption({
                title: {
                    text: '居民总数',
                    textStyle: {
                        color: '#999',
                        fontWeight: 'normal',
                        fontSize: 12
                    },
                    subtext: this.residentTotalNum,
                    subtextStyle: {
                        color: '#333',
                        fontSize: 18,
                    },
                    x: '143',
                    y: '140'
                },
    
                legend: [
                    {
                        orient: 'vertical',
                        x: '30',
                        y: '285',
                        data: ['男']
                    },
                    {
                        orient: 'vertical',
                        x: '185',
                        y: '285',
                        data: [ '女']
                    }
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '45%'],
                        center: ['50%', '43%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            emphasis: {
                            show: false
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 600, name: '男' },
                            { value: 400, name: '女' }
                        ]
                    }
                ]
            });
            // 居民标签
            var myFifthChart = echarts.init(document.getElementById('chart_5'), '', {width: 345, height:385});
            myFifthChart.setOption({
                title: {
                    
                },
                grid: {   // 直角坐标系内绘图网格
                    left: '20',  //grid 组件离容器左侧的距离
                    top: '80',
                    right: '20',
                    bottom: '10',
                },
                xAxis: {
                    show: false
                },
                yAxis: {
                    data: ['多动症','慢病护理','高血脂','高血糖','冠心病','高血压'],
                    show: false 
                },
                series: [
                    {
                        name: '%',
                        type: 'bar',
                        center: ['50%', '50%'],
                        data: [200, 120, 40, 30, 110, 88],
                        barWidth: 8,
                        label: { //图形上的文本标签
                            show: true,
                            position: 'center',//标签的位置
                            offset: [0,-22],  //标签文字的偏移，此处表示向上偏移40
                            formatter: '{b}:{c}', //'{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                            color: '#999',//标签字体颜色
                            fontSize: 13,  //标签字号
                        },
                        itemStyle: {//图形样式
                            normal: {  //normal 图形在默认状态下的样式;
                                //emphasis图形在高亮状态下的样式
                                barBorderRadius: 10,//柱条圆角半径,单位px.
                                                    //此处统一设置4个角的圆角大小;
                                                    //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                                color: '#2984f8'
                            }
                        },
                        zlevel:1//柱状图所有图形的 zlevel 值,//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
                    },
                    {
                        name: '进度条背景',
                        type: 'bar',
                        barGap: '-100%',//不同系列的柱间距离，为百分比。
                        // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
                        // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
                        //并且是对此坐标系中所有 'bar' 系列生效。
                        barWidth: 8,
                        data: [
                            this.residentTotalNum, this.residentTotalNum, this.residentTotalNum, 
                            this.residentTotalNum, this.residentTotalNum,this.residentTotalNum, this.residentTotalNum
                        ],
                        color: '#f2f7fb',//柱条颜色
                        itemStyle: {
                            normal: {
                            barBorderRadius: 10
                            }
                        }
                    }
                ]
            });
            // 服务包使用情况
            var mySixthChart = echarts.init(document.getElementById('chart_6'), '', {width: 720, height:385});
            mySixthChart.setOption({
                grid: {   // 直角坐标系内绘图网格
                    left: '20',  //grid 组件离容器左侧的距离
                    top: '80',
                    right: '20',
                    bottom: '30',
                    containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
                    // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
                    //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
                },
                xAxis: {
                    data: ['老年人护理包','基础包1','基础包2','基础包4','儿童护理包','高级特需包'],
                },
                yAxis: {
                },
                series: [
                    {
                        name: '%',
                        type: 'bar',
                        center: ['50%', '50%'],
                        data: [200, 120, 40, 30, 110, 88],
                        barWidth: 12,
                        
                        itemStyle: {//图形样式
                            normal: {  //normal 图形在默认状态下的样式;
                                //emphasis图形在高亮状态下的样式
                                barBorderRadius: 10,//柱条圆角半径,单位px.
                                                    //此处统一设置4个角的圆角大小;
                                                    //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                                color: '#2984f8'
                            }
                        }
                    }
                ]
            });


        },
        checkDateRange() {
            this.init()
        }
    },
}
</script>

<style lang="less" scoped>
.main {
    .select-date-range {

        .select-date-range-text {
            font-size: 14px;
            color: #999999;
            margin-left: 50px;
            margin-right: 15px;
        }
    }

    .main-div {
        .el-row {
        margin-top: 25px;
        }
        .el-row:last-child {
            margin-bottom: 20px;
            margin-top: 40px;
        }
        
        .grid-content {
            position: relative;
            border-radius: 5px;
            min-height: 36px;
            box-shadow: 0px 0px 2px #cccccc;

            .grid-content-title{
                position: absolute;
                top: 20px;
                left: 20px
            }

            .table {
                width:90%; 
                margin: 0 auto;
                padding-bottom: 45px;
            }

        }

    }

}

</style>